<template>
  <el-dialog class="show-file" :model-value="!!show_file_src" width="80%" :draggable="true" style="margin: auto;margin-top: 10vh;" :destroy-on-close="true" @close="show_file_src=''">
    <img v-if="/\.(jpg|jpeg|png|gif|webp)(\?|$)/.test(show_file_src)" style="width: 100%;height: 60vh;object-fit: contain;" class="show-img" :src="show_file_src">
    <audio v-else-if="/\.(mp3)(\?|$)/.test(show_file_src)" style="width: 100%;height: 50px;" :src="show_file_src" autoplay="autoplay" controls="controls"></audio>
    <video v-else-if="/\.(mp4)(\?|$)/.test(show_file_src)" style="width: 100%;height: 60vh;" :src="show_file_src" autoplay="autoplay" controls="controls"></video>
    <div v-else style="padding: 10px 50px;">{{show_file_src}}</div>
  </el-dialog>
</template>

<script>
export default {
  name: "show_file",
  data(){
    return{
      show_file_src: ''
    }
  },
  methods: {
    show(src){
      this.show_file_src = src;
    },
    hide(){
      this.show_file_src = '';
    },
    init(){
      this.hide();
    }
  },
}
</script>

<style scoped>
.show-file .show-img{background-image: url("@/assets/img/show_img_bg.png");}
</style>